<!-- 购物车 -->
<template>
	<view class="zg-area">
		<!-- 工具栏-上 -->
		<view class="fixed-tool-top" v-if="list.length > 0">
			<view class="ftt-l">
				<text>购物车</text>
				<text>共{{list.length || 0}}件商品</text>
			</view>
			<view class="ftt-r">
				<button plain v-if="editing" @click="editing = false">完成</button>
				<button plain v-else @click="editing=true"> <text>编辑</text></button>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="area-1" v-if="list.length > 0">
				<view class="card" v-for="(item,index) in list" :key="index">
					<view class="card-title">
						<view class="ct-s">
							<image v-if="item.selected" src="/pagesShop/static/s2.png" mode="" @click="select1(item,false)"></image>
							<image v-else src="/pagesShop/static/s1.png" mode="" @click="select1(item,true)"></image>
						</view>
						<view class="ct-name" @click="goRouter1(item)">
							<text>{{item.scName || '店铺名称'}}</text>
							<image src="/pagesShop/static/right.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="card-content" @click="goRouter10(item1)" v-for="(item1,index1) in item.mallCartItems" :key="index1">
						<view class="cc-s">
							<image v-if="item1.selected" src="/pagesShop/static/s2.png" mode="" @click.stop="select2(item1,false)"></image>
							<image v-else src="/pagesShop/static/s1.png" mode="" @click.stop="select2(item1,true)"></image>
						</view>
						<view class="cc-d">
							<view class="ccd-img">
								<image class="tp-br8" :src="`${shopImgUrl}${item1.productPic}`" mode="widthFix"></image>
							</view>
							<view class="ccd-c">
								<view class="ccd-t ellispsis2">
									{{item1.productName || '商品名称'}}
								</view>
								<view class="ccd-i">
									<text v-for="(item2,index2) in item1.productAttr" :key="index2">{{item2.specification}} : {{item2.value}}</text>
								</view>
								<view class="ccd-b">
									<view class="flex align_baseline tp-fz24">￥ <text class="tp-fz36">{{item1.t_price || 0}}</text></view>
									<view>
										<image src="/pagesShop/static/minus.png" mode="heightFix" @click.stop="jian(item1)"></image>
										<input type="text" disabled :value="item1.quantity">
										<image src="/pagesShop/static/plus.png" mode="heightFix" @click.stop="jia(item1)"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nomore" v-if="list.length === 0 && !loading">
				<view class="nomore-text">
					<image src="/pagesShop/static/zanwu.png" mode="widthFix"></image>
					<view>暂无数据</view>
				</view>
			</view>
		</view>
		<!-- 工具栏-下 -->
		<view class="fixed-tool-bottom" v-if="list.length > 0">
			<view class="ftb-l">
				<image v-if="selected" src="/pagesShop/static/s2.png" mode="" @click="selectAll(false)"></image>
				<image v-else src="/pagesShop/static/s1.png" mode="" @click="selectAll(true)"></image>
				<text>全部</text>
			</view>
			<view class="ftb-r">
				<view class="">
					<template v-if="!editing">
						合计：<text>￥{{total_price || 0}}</text>
					</template>
				</view>
				<view class="">
					<button plain v-if="editing" @click="del">删除</button>
					<button plain v-else @click="finish">结算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';

	export default {
		data() {
			return {
				editing: false,
				selected_1_1: false,
				selected_1_2: false,
				selected_2_1: false,
				selected_2_2: false,
				loading: false,
				list: [],
				selected_list: [],
				details2: {},
				allmyshop: [], //所有选中过的商品数据,不做去重和false处理
				nowmyshop: [], //提交处理allmyshop中false和重复的
			}
		},
		computed: {
			...mapGetters(['getToken']),
			// 全选
			selected() {
				let sa = true
				this.list.map(item => {
					item.mallCartItems.map(item1 => {
						if (!item1.selected) {
							sa = false
						}
					})
				})
				return sa
			},
			// 合计
			total_price() {
				let tp = 0
				this.list.map(item => {
					item.mallCartItems.map(item1 => {
						if (item1.selected) {
							// console.log(item1.productPrice, item1.quantity);
							tp += item1.productPrice * item1.quantity
						}
					})
				})
				return parseFloat((tp).toFixed(2))

			},
		},
		onReady() {
			// 去添加地址
			uni.$on('add-address-trolley', data => {
				this.details2 = data
			})
			
		},
		onShow() {
			this.getList1()
			this.getDetails2()
			this.$store.commit('delnowmyshop')
		},
		onPullDownRefresh() {
			this.getList1()
			this.getDetails2()
		},
		methods: {
			// 选择店铺商品
			select1(data, selected) {
				if (selected == true) {
					data.mallCartItems.forEach(item => {
						this.allmyshop.push(item)
					})
				}
				this.list = this.list.map(item => {
					if (item._id === data._id) {
						item.selected = selected
						item.mallCartItems = item.mallCartItems.map(item1 => {
							item1.selected = selected
							return item1
						})
					}
					return item
				})
				this.getSelectIDs()
			},
			// 选择单个商品
			select2(data, selected) {
				if (selected == true) {
					this.allmyshop.push(data)
				}
				this.list = this.list.map(item => {
					item.mallCartItems = item.mallCartItems.map(item1 => {
						if (item1._id === data._id) {
							// console.log(item1._id,  data._id);
							item1.selected = selected
							selected ? item.selected_len++ : item.selected_len--
						}
						return item1
					})
					item.selected = selected && item.selected_len === item.mallCartItems.length
					return item
				})
				this.getSelectIDs()
			},
			selectAll(selected) {
				this.allmyshop = []
				if (selected == true) {
					this.list.forEach(item => {
						item.mallCartItems.forEach(it => {
							this.allmyshop.push(it)
						})
					})
				}
				if (selected == false) {
					this.allmyshop = []
				}
				this.list = this.list.map(item => {
					item.selected = selected
					item.mallCartItems = item.mallCartItems.map(item1 => {
						item1.selected = selected
						return item1
					})
					return item
				})
				this.getSelectIDs()
			},
			getSelectIDs() {
				const selected_list = []
				this.list.map(item => {
					item.mallCartItems.map(item1 => {
						if (item1.selected) {
							selected_list.push(item1.id)
						}
					})
				})
				this.selected_list = selected_list
			},
			handleArr1(str) {
				if (typeof str === 'string' && str.length > 0) {
					try {
						const arr = JSON.parse(str)
						return arr
					} catch (e) {
						return []
					}
				} else {
					return []
				}
			},
			// 查询购物车
			getList1() {
				this.list = []
				this.loading = true
				this.$http.post(this.$api.shop_list_5).then(result => {
					this.loading = false
					uni.stopPullDownRefresh()
					if (result.code === 200) {
						const list = result.data;
						list.map((item, index) => {
							if (Array.isArray(item.mallCartItems)) {
								item.mallCartItems = item.mallCartItems.map((item1, index1) => {
									item1.productAttr = this.handleArr1(item1.productAttr) // 商品属性
									item1.quantity = parseInt(item1.quantity) || 0 // 数量
									item1.stock = parseInt(item1.stock) || 0 // 库存
									item1.t_price = parseFloat((item1.productPrice * item1.quantity).toFixed(2)) // 总价格
									item1.selected = false
									item1._id = this.randomString()
									return item1
								})
							} else {
								item.mallCartItems = []
							}
							item.selected = false
							item.selected_len = 0
							item._id = this.randomString()
							this.list.push(item)
						})
					} else {
						this.list = []
					}
				}).catch(() => {
					this.loading = false
					this.list = []
				})
			},
			// 获取默认收货地址
			getDetails2() {
				this.$http.post(this.$api.shop_order_6).then(result => {
					if (result.code === 200) {
						this.details2 = result.data
					} else {
						this.details2 = {}
					}
				}).catch(() => {
					this.details2 = {}
				})
			},
			// 结算购物车
			finish() {
				if (this.selected_list.length > 0) {
					this.action1()
				} else {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
				}
			},
			// 删除购物车商品
			del() {
				this.allmyshop = []
				if (this.selected_list.length > 0) {
					this.$http.post(this.$api.shop_list_7, {}, {
						params: {
							ids: this.selected_list.join(','), // 购物车ids
						}
					}).then(result => {
						uni.showToast({
							title: result.msg,
							icon: 'none'
						})
						if (result.code === 200) {
							this.getList1()
						}
					})
				} else {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
				} 
			},
			// 提交购物车结算清单
			action1() {
				if (!this.details2.id) {
					uni.showToast({
						title: '没有收货地址',
						icon: 'none'
					})
					uni.navigateTo({
						url: '/pagesUser/addressEdit',
					})
					return
				}
				this.nowmyshop = []
				this.allmyshop.forEach((item, index) => {
					if (item.selected == true) {
						this.nowmyshop.push(item)
					}
				})
				for (let i = 0; i < this.nowmyshop.length; i++) {
					for (let j = i + 1; j < this.nowmyshop.length; j++) {
						if (this.nowmyshop[i].id === this.nowmyshop[j].id) {
							this.nowmyshop.splice(j, 1)
							j = j - 1;
						}
					}
				} 
				this.$store.commit('upnowmyshop',this.nowmyshop)
				this.$store.commit('upselected_list',this.selected_list)
				console.log(this.selected_list)// 购物车多个ids
				
					 uni.redirectTo({
						url: '/pagesShop/order/gouwuchetijiao'
					}) 
				
				/* this.$http.post(this.$api.shop_list_6, {
					cartItems: this.selected_list, // 购物车多个ids
					couponId: '', // 优惠券领取id
					addressId: this.details2.id, // 地址id
				}).then(result => {
					if (result.code === 200) {
						const oid = result.data.orderNs
						const id = result.data.id */

				/* setTimeout(() => {
					uni.redirectTo({
						url: `../order/trolley_wait_order?oid=${oid}&id=${id}`
					})
				},300) */
				/* } else {
						uni.showToast({
							title: result.msg,
							icon:'none'
						})
					}
				}) */
			},
			// 去商品详情
			goRouter10(item) {
				if(item.productId){
					uni.navigateTo({
						url: `/pagesShop/details/details?cid=${item.productId}`
					});
				}
				
			},
			jian(item1) {
				if (parseInt(item1.stock) === 0) {
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					})
				}
				if (item1.quantity > 1) {
					item1.quantity--
					// 计算商品价格
					item1.t_price = parseFloat((item1.quantity * item1.productPrice).toFixed(2))
				}
			},
			jia(item1) {
				if (parseInt(item1.stock) === 0) {
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					})
				}
				if (item1.quantity < item1.stock) {
					item1.quantity++
					// 计算商品价格
					item1.t_price = parseFloat((item1.quantity * item1.productPrice).toFixed(2))
				}
			},
			// 去店铺
			goRouter1(item) {
				if (Object.prototype.toString.call(item) === '[object Object]' && typeof item.shopId === 'string' && item.shopId !==
					'') {
					uni.navigateTo({
						url: `../shop/index1?sid=${item.shopId}`
					});
				} else {
					console.error("店铺id错误");
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 50px 0;
	}

	.card {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.fixed-tool-top {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		left: 0;
		width: 100%;
		height: 88rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.ftt-l {
		text {
			margin-right: 20rpx;

			&:nth-of-type(1) {
				font-size: 30rpx;
			}
		}
	}

	.ftt-r {
		button {
			font-size: 30rpx;
			color: $blue;
		}
	}

	.fixed-tool-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.ftb-l {
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin: 0 20rpx;
		}

		text {
			&:nth-of-type(1) {
				font-size: 26rpx;
			}
		}
	}

	.ftb-r {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		view {
			&:nth-of-type(1) {
				margin-right: 60rpx;
			}

			text {
				color: $uni-color-error;
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		button {
			background-color: $uni-color-error;
			color: #fff;
			font-size: 26rpx;
			padding: 15rpx 30rpx;
			border-radius: 40rpx;
		}
	}

	.card-title {
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
	}

	.ct-s {
		display: flex;
		align-items: center;
		margin-right: 20rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			padding: 10rpx;
		}
	}

	.ct-name {
		display: flex;
		align-items: center;
		font-size: 30rpx;

		image {
			width: 10rpx;
			height: auto;
			margin-left: 15rpx;
		}
	}

	.card-content {
		display: flex;

		&:not(:nth-last-of-type(1)) {
			padding-bottom: 20rpx;
		}
	}

	.cc-s {
		display: flex;
		align-items: center;
		margin-right: 20rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			padding: 10rpx;
		}
	}

	.cc-d {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.ccd-img {
		flex-shrink: 0;
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: auto;
		}
	}

	.ccd-c {
		flex-grow: 1;
	}

	.ccd-t {
		font-size: 26rpx;
	}

	.ccd-i {
		margin: 15rpx 0;

		text {
			color: #999;
			font-size: 24rpx;
			margin-right: 20rpx;
		}
	}

	.ccd-b {
		display: flex;
		justify-content: space-between;

		view {
			&:nth-of-type(1) {
				color: $uni-color-error;
				font-weight: bold;
			}

			&:nth-of-type(2) {
				display: flex;
				align-items: center;

				image {
					flex-shrink: 0;
					width: auto;
					height: 40rpx;
				}

				input {
					flex-shrink: 0;
					width: 50rpx;
					height: 40rpx;
					text-align: center;
					background-color: #f5f5f5;
					box-sizing: border-box;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
